<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>Hello MUI</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">

		<link rel="stylesheet" href="../../css/mui.min.css">
		<link rel="stylesheet" href="../../css/app.css">
		<style>
			h4.mui-ellipsis {
				line-height: 20px;
			}
			.readed {
				font-weight: normal;
			}
			.due {
				font-weight: normal;
				color: #8f8f94;

			}
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">公告列表</h1>
		</header>

		<div class="mui-content" id="menuList">

			<ul id="parent" class="mui-table-view mui-table-view-striped mui-table-view-condensed" style="margin-top:0">
				<!--
		        <li class="mui-table-view-cell">
		        	<a class="mui-navigate-right" href="noticeDetail.html">
			            <div class="mui-table">
			                <div class="mui-table-cell mui-col-xs-10">
			                    <h4 class="mui-ellipsis">信息化推进办公室张彦合同付款信息化</h4>
			                    <p class="mui-h6 mui-ellipsis">发布时间：2015-04-05 12:00:00</p>
			                </div>
			            </div>
		        	</a>
		        </li>
		        
		        <li class="mui-table-view-cell">
		        	<a class="mui-navigate-right">
			            <div class="mui-table">
			                <div class="mui-table-cell mui-col-xs-10">
			                    <h4 class="mui-ellipsis readed">信息化推进办公室张彦合同付款信息化</h4>
			                    <p class="mui-h6 mui-ellipsis">发布时间：2015-04-05 12:00:00</p>
			                </div>
			            </div>
		        	</a>
		        </li>
		        
		        <li class="mui-table-view-cell">
		        	<a class="mui-navigate-right">
			            <div class="mui-table">
			                <div class="mui-table-cell mui-col-xs-10">
			                    <h4 class="mui-ellipsis due">信息化推进办公室张彦合同付款信息化</h4>
			                    <p class="mui-h6 mui-ellipsis">发布时间：2015-04-05 12:00:00</p>
			                </div>
			            </div>
		        	</a>
		        </li>
	            -->

		        
		     </ul>
		</div>

	</body>
	<script src="../../js/mui.min.js"></script>
	<script src="../../js/template.js"></script>
	<script src="../../js/app.js"></script>
	<script src="../../js/_API.js"></script>
	
	<script id="tmpl" type="text/html">
		{{each datas as value i}}
        <li class="mui-table-view-cell">
        	<a class="mui-navigate-right" data-window="{{value.id}}">
	            <div class="mui-table">
	                <div class="mui-table-cell mui-col-xs-10">
	                    <h4 class="mui-ellipsis readed">{{value.title}}</h4>
	                    <p class="mui-h6 mui-ellipsis">发布时间：{{value.createTime}}</p>
	                </div>
	            </div>
        	</a>
        </li>
        {{/each}}

	</script>
	
	<script>
		mui.init({
		  preloadPages:[{
		    id:'noticeDetail.html',
		    url:'noticeDetail.html',
		    styles: {
				top: 0,
				bottom: 0,
				zindex: 99999
			},
		  }]
		});
		
		var detailPage = null;
		mui('#parent').on('tap', '[data-window]', function() {
			var id = this.getAttribute('data-window');
			
			if(!detailPage){
				detailPage = plus.webview.getWebviewById('noticeDetail.html');
			}
			//触发详情页面的newsId事件
			mui.fire(detailPage, 'changeId', {
				id:id
			});
			//打开详情页面          
			mui.openWindow({
				id:'noticeDetail.html'
			});
		});
		
		mui.plusReady(function(){
			_API.ajax2('notices/page', {}, true)
			.success(function(json){
	        	var html = template('tmpl', json.pv);
				document.getElementById('parent').innerHTML = html;
			}).error(function(json){
	        	plus.nativeUI.toast(json.msgInfo);
			});
		});
	</script>

</html>